<template>
  <Card class="data-statistic-card" :bordered="false">
    <p slot="title">
      数据分析
    </p>
    <div class="charts-border2">
      <data-card-count
        style="padding-bottom: 20px;"
        :countWidth="countWidth"
        :cardCountData="cardCountData">
      </data-card-count>

      <data-line-charts-refuel
        v-if="showWho === 'refuel_side'"
        style="width:100%;height:30vh;margin-top:-30px;padding-bottom:10px;"
        :xAxisDataList="todayXAxisDataList"
        :yAxisData="yAxisData"
      ></data-line-charts-refuel>

      <data-line-charts-checkout
        v-if="showWho === 'checkout'"
        style="width:100%;height:30vh;margin-top:-30px;padding-bottom:10px;"
        :xAxisDataList="todayXAxisDataList"
        :yAxisData="yAxisData"
      ></data-line-charts-checkout>
<!--
      <data-line-charts-checkout2
        v-if="showWho === 'checkout'"
        style="width:100%;height:30vh;margin-top:-30px;padding-bottom:10px;"
        :xAxisDataList="todayXAxisDataList"
        :yAxisData="yAxisData"
      ></data-line-charts-checkout2> -->

    </div>
  </Card>
</template>

<script>
import {mapState, mapGetters, mapActions} from 'vuex'

import DataCardCount from "./dataCount";
import DataLineChartsCheckout from "./dataLineChartsCheckout";
import DataLineChartsCheckout2 from "./dataLineChartsCheckout2";
import DataLineChartsRefuel from "./dataLineChartsRefuel";

export default {
  components: {
    DataCardCount,
    DataLineChartsCheckout,
    DataLineChartsCheckout2,
    DataLineChartsRefuel
  },
  data() {
    return {
      countWidth: '260px' // 宽度
    }
  },
  computed: {
    ...mapState([
      'monitorData', // 监控的视频流信息
      'countData', // 便利店统计数据
      'checkoutServiceData', // 服务人数
      'enterPersonsData', // 进店人数
      'refuelServiceData', // 加油区相关数据
      'stationCenterCountData',
    ]),
    ...mapGetters([
      'serviceEnterRate', // 便利店服务率，服务人数/进店人数
      'todayXAxisDataList',
      'weekXAxisDataList',
      'dayWeekMonthStartEndTime',
    ]),
    showWho() {
      if(this.monitorData.reqPlayerInfo.category === 'checkout' || this.monitorData.reqPlayerInfo.category === 'gate') {
        return 'checkout'
      } else if(this.monitorData.reqPlayerInfo.category === 'refuel_side' || this.monitorData.reqPlayerInfo.category === 'overview') {
        return 'refuel_side'
      }
    },
    cardCountData() {
      if(this.monitorData.reqPlayerInfo.category === 'checkout' || this.monitorData.reqPlayerInfo.category === 'gate') {
        this.countWidth = '260px'
        console.log("11111111",this.countData)
        return this.countData
      } else if(this.monitorData.reqPlayerInfo.category === 'refuel_side' || this.monitorData.reqPlayerInfo.category === 'overview') {
        this.countWidth = '200px'
        return [
          { title: "服务总车辆数", value: this.refuelServiceData.serviceTotalCount + "辆" },
          { title: "平均服务时间", value: this.refuelServiceData.serviceTotalAverageTime + "分钟" },
          { title: "服务违规率", value: this.stationCenterCountData[1].value }
        ]
      } else if(this.monitorData.reqPlayerInfo.category === 'unload') {
        return [
          { title: "卸油次数", value: this.stationCenterCountData[0].value }
        ]
      } else if(this.monitorData.reqPlayerInfo.category === 'safebox') {
        return [
          { title: "保险柜打开次数", value: this.stationCenterCountData[2].value },
          { title: "钱箱打开次数", value: this.stationCenterCountData[3].value }
        ]
      }
    },
    fakeEnterPersonsData() {
      return this.servicePersonsData.map(ele=>{
        return ele*(Math.random()+1)
      })
    },
    yAxisData() {
      if(this.monitorData.reqPlayerInfo.category === 'checkout' || this.monitorData.reqPlayerInfo.category === 'gate') {
        return [
          { name: '进店人次', data: this.enterPersonsData },
          { name: '服务人次', data: this.checkoutServiceData.serviceCount },
          { name: '服务率', data: this.serviceEnterRate }]
      } else if(this.monitorData.reqPlayerInfo.category === 'refuel_side' || this.monitorData.reqPlayerInfo.category === 'overview') {
        return [
          { name: '服务车辆数', data: this.refuelServiceData.serviceCount },
          { name: '平均服务时间', data: this.refuelServiceData.serviceAverageTime }]
      }
    }
  },
  mounted() {
    this.getStatisticsList()
  },
  methods: {
    ...mapActions([
      'getServiceTimeData', // 获取便利店统计数据
      'getCustomerEnter', // 获取进店人数
      'getViolateRate',
      'getStationCenterCountData', // 获取卸油次数，保险柜打开次数，钱箱打开次数
    ]),
    getStatisticsList() {
      if(this.monitorData.reqPlayerInfo.category === 'checkout' || this.monitorData.reqPlayerInfo.category === 'gate') {
         // 获取便利店统计数据
        let checkoutParams = {
          group: 'hour',
          category: 'checkout',
          start_time: this.dayWeekMonthStartEndTime.todayStartTime,
          end_time: this.dayWeekMonthStartEndTime.todayEndTime
        }
        this.getServiceTimeData(checkoutParams)

        // 获取进店人数
        let enterParams = {
          group:'hour',
          start_time: this.dayWeekMonthStartEndTime.todayStartTime,
          end_time: this.dayWeekMonthStartEndTime.todayEndTime
        }
        this.getCustomerEnter(checkoutParams)
        
        //获取违规率
        let violateRateParams = {
          category:'checkout',
          start_time: this.dayWeekMonthStartEndTime.todayStartTime,
          end_time: this.dayWeekMonthStartEndTime.todayEndTime
        }
        this.getViolateRate(violateRateParams)
      } else if(this.monitorData.reqPlayerInfo.category === 'refuel_side') {
        // console.log('查询 加油区相关数据')
        // 获取加油区服务车辆服务时间统计数据
        let refuelParams = {
          group: 'hour',
          category: "refuel_side",
          channel:this.monitorData.reqPlayerInfo.channel,
          start_time: this.dayWeekMonthStartEndTime.todayStartTime,
          end_time: this.dayWeekMonthStartEndTime.todayEndTime
        }
        this.getServiceTimeData(refuelParams)

        // 获取加油区违规率
        let refuelViolateParams = {
          category: "refuel",
          start_time: this.dayWeekMonthStartEndTime.todayStartTime,
          end_time: this.dayWeekMonthStartEndTime.todayEndTime
        }
        this.getViolateRate(refuelViolateParams)
      }
      else if(this.monitorData.reqPlayerInfo.category === 'overview'){
        let refuelParams = {
          group: 'hour',
          category: "refuel_side",
          start_time: this.dayWeekMonthStartEndTime.todayStartTime,
          end_time: this.dayWeekMonthStartEndTime.todayEndTime
        }
        this.getServiceTimeData(refuelParams)

        // 获取加油区违规率
        let refuelViolateParams = {
          category: "refuel",
          channel:this.monitorData.reqPlayerInfo.channel,
          start_time: this.dayWeekMonthStartEndTime.todayStartTime,
          end_time: this.dayWeekMonthStartEndTime.todayEndTime
        }
        this.getViolateRate(refuelViolateParams)
      } else if(this.monitorData.reqPlayerInfo.category === 'unload') {
        // console.log('查询 卸油口相关数据')
        // 获取中间几项的次数
        let unloadParams = {
          group: 'hour',
          level:0,
          start_time: this.dayWeekMonthStartEndTime.todayStartTime,
          end_time: this.dayWeekMonthStartEndTime.todayEndTime,
          event_names: ["开启保险柜", "开启钱箱", "油罐车到达"].join(",")
        }
        this.getStationCenterCountData(unloadParams)

      } else if(this.monitorData.reqPlayerInfo.category === 'safebox') {
        console.log('查询 财务室相关数据')
        // 获取中间几项的次数
        let safeboxParams = {
          group: 'hour',
          level:0,
          start_time: this.dayWeekMonthStartEndTime.todayStartTime,
          end_time: this.dayWeekMonthStartEndTime.todayEndTime,
          event_names: ["开启保险柜", "开启钱箱", "油罐车到达"].join(",")
        }
        this.getStationCenterCountData(safeboxParams)
      }
    }
  }
};
</script>

<style lang="less">
.data-statistic-card .ivu-card-head {
  padding: 0px 10px;
  background-color: #13a4c2;
  border-bottom: 1px solid #13a4c2;
  height: 46px;
}
.data-statistic-card .ivu-card-head p {
  font-size: 2.6rem;
  height: 46px;
  line-height: 46px;
  color: #fff;
  text-align: left;
}
.data-statistic-card .ivu-card-body {
  background-color: #01237C;
  padding: 0px;
}
</style>
